<template>
  <div class="card">
    <h2 class="text-lg font-bold">人口与就业</h2>
    <div class="grid grid-cols-1 gap-4">
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">实有人口及增速</p>
          <a-button type="primary" @click="generateActualPopulationReport"
            >生成报告
            <a-modal v-model:visible="actualPopulationModal" title="实有人口报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="actualPopulationData" :options="chartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">户籍人口及增速</p>
          <a-button type="primary" @click="generateHouseholdPopulationReport"
            >生成报告
            <a-modal v-model:visible="householdModal" title="户籍人口报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="registeredPopulationData" :options="chartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">新生儿数量及增速</p>
          <a-button type="primary" @click="createNeonatalReport"
            >生成报告
            <a-modal v-model:visible="createNeonatalReportModal" title="新生儿报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>

        <LineChart :data="newbornsData" :options="chartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">累计新增就业人数</p>

          <a-button type="primary" @click="createCumulativeEmploymentReport"
            >生成报告
            <a-modal
              v-model:visible="createCumulativeEmploymentReportModal"
              title="累计新增就业人数报告"
            >
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart
          :data="newEmploymentData"
          :options="newEmploymentDataOptions"
          class="w-full h-48"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const householdModal = ref(false)
const actualPopulationModal = ref(false)
const createNeonatalReportModal = ref(false)
const createCumulativeEmploymentReportModal = ref(false)
// 人口与就业数据
const actualPopulationData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '实有人口(万人)',
      data: [1200, 1250, 1300, 1320, 1350],

      backgroundColor: 'rgba(255, 99, 132, 0.8)', // 亮红色
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1,
      type: 'bar',
      borderRadius: 4,
      barPercentage: 0.6,
      categoryPercentage: 0.7,
      yAxisID: 'y',
    },
    {
      label: '增速(%)',
      data: [3.2, 4.1, 4.0, 1.5, 2.3],
      backgroundColor: 'rgba(255, 159, 64, 0.8)', // 亮橙色
      borderColor: 'rgba(255, 159, 64, 1)',
      borderWidth: 2,
      type: 'line',
      fill: false,
      tension: 0.3,
      pointRadius: 4,
      pointBackgroundColor: '#fff',
      pointBorderColor: 'rgba(255, 99, 132, 1)',
      pointBorderWidth: 2,
      yAxisID: 'y1',
    },
  ],
})

const registeredPopulationData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '户籍人口(万人)',
      data: [850, 870, 890, 910, 930],
      backgroundColor: 'rgba(54, 162, 235, 0.9)', // 亮蓝色
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
      type: 'bar',
      borderRadius: 4,
      barPercentage: 0.6,
      categoryPercentage: 0.7,
      yAxisID: 'y',
    },
    {
      label: '增速(%)',
      data: [2.1, 2.3, 2.3, 2.2, 2.2],
      backgroundColor: 'rgba(255, 159, 64, 0.8)', // 亮橙色
      borderColor: 'rgba(255, 159, 64, 1)',
      borderWidth: 2,
      type: 'line',
      fill: false,
      tension: 0.3,
      pointRadius: 4,
      pointBackgroundColor: '#fff',
      pointBorderColor: 'rgba(255, 159, 64, 1)',
      pointBorderWidth: 2,
      yAxisID: 'y1',
    },
  ],
})

const newbornsData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '新生儿数量(万人)',
      data: [12, 11.8, 11.5, 10.8, 10.2],
      backgroundColor: 'rgba(75, 192, 192, 0.9)', // 亮青色
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1,
      type: 'bar',
      borderRadius: 4,
      barPercentage: 0.6,
      categoryPercentage: 0.7,
      yAxisID: 'y',
    },
    {
      label: '增速(%)',
      data: [-1.5, -1.7, -2.6, -6.1, -5.6],
      backgroundColor: 'rgba(255, 159, 64, 0.8)', // 亮橙色
      borderColor: 'rgba(255, 159, 64, 1)',
      borderWidth: 2,
      type: 'line',
      fill: false,
      tension: 0.3,
      pointRadius: 4,
      pointBackgroundColor: '#fff',
      pointBorderColor: 'rgba(255, 159, 64, 1)',
      pointBorderWidth: 2,
      yAxisID: 'y1',
    },
  ],
})

const newEmploymentData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '新增就业(万人)',
      data: [15, 16, 16.5, 14, 15.5],
      borderColor: '#FFC107',
      backgroundColor: 'rgba(255, 193, 7, 0.1)',
      fill: true,
    },
  ],
})

// 通用图表配置
const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      position: 'left', // 左侧y轴
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '万人' // 左侧y轴显示"万人"单位
        },
      },
    },
    y1: {
      position: 'right', // 右侧y轴
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        drawOnChartArea: false, // 不绘制在图表区域内
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '%' // 右侧y轴显示"%"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            // 根据标签包含的关键词自动添加单位
            if (label.includes('增速')) {
              label += context.parsed.y + '%'
            } else {
              label += context.parsed.y + '万人'
            }
          }
          return label
        },
      },
    },
  },
})
// 通用图表配置
const newEmploymentDataOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '万人' // 左侧y轴显示"万人"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            label += context.parsed.y + '万人'
          }
          return label
        },
      },
    },
  },
})
// 实有人口生成报告
const generateActualPopulationReport = () => {
  actualPopulationModal.value = true
}
// 户籍人口生成报告
const generateHouseholdPopulationReport = () => {
  householdModal.value = true
}
// 新生儿生成报告
const createNeonatalReport = () => {
  createNeonatalReportModal.value = true
}
// 累计新增就业人数生成报告
const createCumulativeEmploymentReport = () => {
  createCumulativeEmploymentReportModal.value = true
}
</script>

<style scoped>
canvas {
  width: 100% !important;
  height: 200px !important;
}
.chart-container {
  height: 250px; /* 设置固定高度 */
}
</style>
